Development Live Preview MODE

Regular Input box
<input type="text">


Duration Input box
<input type="text" class="html-duration-picker" >



Duration Input box with constraints. Max 200:00:00

<input type="text" class="html-duration-picker" data-duration-max="200:00:00" >


Duration Input box with constraints. Max 00:31:05, min 00:30:00

<input type="text" class="html-duration-picker" data-duration="00:29:50" data-duration-min="00:30:10" data-duration-max="00:31:05" >


Bootstrap Input box
<input type="text" class="form-control">

Bootstrap Duration Input box
<input type="text" class="form-control html-duration-picker" >



Sized Input box
<input type="text" size="12" >

Sized Duration Input box
<input type="text" size="12" html-duration-picker>

Sized Duration Input box
<input type="text" data-hide-seconds size="12" html-duration-picker>



Duration Input with Invalid Value
<input type="text" value="abcd" class="html-duration-picker" >


Duration Input with valid Value
<input type="text" value="00:12:34" class="html-duration-picker" >


Duration Input with valid Value and data duration
<input type="text" data-duration="56:43:21" value="00:12:34" class="html-duration-picker" >